<template>
	<div class="container">
		<Header title="申诉处理"></Header>
	    <div class="prompt">申诉处理：应用经纪人对报备客户因判客失败／手工无效导致客户无效进行申诉的情况。申诉成功则该报备客户会被置为未到访。</div>
	    <ul  class="complaint-info-list"
	    	v-infinite-scroll="initAppealList"
		  	infinite-scroll-disabled="loading"
		  	infinite-scroll-distance="10">
	    	<li v-for="(item,index) in appealList" v-show="item.isShow">
	    		<ul class="complaint-info">
			    	<li>
			    		<div class="right-list">
				    		<i class="fa fa-user-o faIcon"></i>
				    		<span class="name">{{item.name}}</span>
			    			<span class="sex"></span>
			    			<div class="numberInfo"><i class="fa fa-mobile faIcon"></i>{{item.mobile}}</div>
		    			</div>
		    			<div class="source"><i  class="fa fa-location-arrow"></i>
	    					状态：<font color="red">{{item.customerStatusName}}</font>
		    			</div>
			    	</li>
			    	<li>
			    		<div class="right-list">
				    		<i class="fa fa-user-o faIcon"></i>
				    		<span class="name">{{item.agentName}}</span>
			    			<span class="sex active"></span>
			    			<span class="label">经纪人</span>
			    			<div class="numberInfo"><i class="fa fa-mobile faIcon"></i>{{item.agentMobile}}</div>
		    			</div>
		    			<div class="source"><i  class="fa fa-location-arrow"></i>来源：{{item.companyName}}</div>
			    	</li>
			    	<li>
			    		<div class="complaint-time"><i class="fa fa-clock-o"></i>申诉时间：{{item.appealDate}}</div>
			    		<div class="complaint-time"><i class="fa fa-comment-o"></i>申诉理由：{{item.remark}}</div>
			    	</li>
			    	<li class="clearfix">
			    		<a href="javascript:;" class="btnA" @click="acceptComplaint(item,index)">接受</a>
			    		<a href="javascript:;" class="btnA btnNo" @click="rejectComplaint(item,index)">拒绝</a>
			    	</li>
			    </ul>
	    	</li>
	    </ul>
	    <p class="page-infinite-loading" v-show="isShow">
	    	<mt-spinner type="fading-circle" class="circleIcon"></mt-spinner>加载中...
	    </p>

	    <!-- 弹出层 -->
	    <div class="popup-page" v-if="toShow">
	    	<div class="popup-mask"></div>
	    	<div class="popup-container">
	    		<div class="popup-header">无效原因</div>
	    		<div class="popup-body">
	    			<ul class="invalid-list">
	    				<li v-for="(item,index) in options" :class="{'active':item.isShow}" @click="checkedState(item)">
							<i class="checkIcon"></i>{{item.name}}
							<input type="checkbox" class="mint-checkbox-input" v-model="item.isShow">
							<textarea v-if="index === 2" class="reason" rows="4" v-model="reason"></textarea>
						</li>
					</ul>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="closePopup">取消</a>
	    			<a href="javascript:;" class="btn checkBtn" @click="rejectSub">确定</a>
	    		</div>
	    	</div>
	    </div>
	</div>
</template>
<script>
	import { InfiniteScroll, Toast , Spinner , MessageBox  } from 'mint-ui';
	export default {
		component:{
			InfiniteScroll,Spinner
		},
		data () {
		    return {
		    	params: {
		      		premisesId: window.sessionStorage.getItem(this.utilHelper.appAssistant+"_premisesId"),
		      		pageNo: 0,
		      		pageSize: 3,
		      		totalPages: ''
		      	},
		      	appealList:[],
		      	isShow:false,
		      	toShow:false,
		      	options:[
		    		{
		    			name:'无效电话号码',
		    			value: "1",
		    			isShow : false
		    		},
		    		{
		    			name:'无购房意向',
		    			value: "2",
		    			isShow : false
		    		},
		    		{
		    			name:'其他',
		    			value: "3",
		    			isShow : false
		    		}
		    	],
		    	reason:'',
		    	cusPreId:'',
		    	checkedNumber:''
		    	
		    }
		},
		mounted: function() {
		},
		methods :{
			initAppealList(){
		   		var _self = this;
				_self.loading = true;
				_self.isShow = true;
				_self.params.pageNo += 1;
				if(_self.params.pageNo && _self.params.totalPages){
					if(_self.params.pageNo > _self.params.totalPages){
						_self.loading = false;
						Toast({
						  	message: "数据已全部展示",
						  	position: 'bottom',
						  	duration: 1000
						});
						_self.isShow = false;
						return false;
					}
				}
				var body = {};
				body.params = {
					premisesId:_self.params.premisesId,
					pageNo:_self.params.pageNo,
					pageSize:_self.params.pageSize
				};
				var url = _self.utilHelper.apiUrl+'/api/getCPAppealPage';
				_self.$http.post(url, body).then((response)=>{
					var body = response.body;
					var appealPage = body.resData.cpPage;
					var resData = body.resData;
					var resPage = resData.cpPage;
					var resRows = appealPage.rows
					_self.params.totalPages = resPage.totalPages;
					if(body.result==1){
						for(var i=0;i<resRows.length;i++){
							var row = resRows[i];
							if(row.visitProtecting){
								//row.customerStatusName = "带看保护中";
							}
							row.isShow = true;
							_self.appealList.push(row);
						}
						_self.loading = false;
						_self.isShow = false;

					}else{
						Toast({
						  	message: errorMsg,
						  	position: 'middle',
						  	duration: 2000
						});
					}
				});
		   	},
		   	rejectComplaint(rows,num) {
		   		this.toShow = true;
		   		this.cusPreId = rows.id;
		   		this.checkedNumber = num;
		   	},
		   	checkedState (item,num) {
		   		let _self = this;
				this.options.forEach(function(options,index){
					options.isShow = false;
				})
				item.isShow = true;
				if(item.value == 1 ){
					_self.reason = _self.options[0].name;
				}else if(item.value == 2 ){
					_self.reason = _self.options[1].name;
				}else if(item.value == 3 ){
					_self.reason = _self.options[2].name;
				}
			},
			closePopup() {
				this.toShow = false;
			},
			rejectSub() {
				let _self = this;
				if(!_self.reason){
					Toast({
					   message: '申诉理由不能为空！',
					   position: 'middle',
					   duration: 2000
					});
					return false;
				}
				var body = {};
				body.params = {
		      			id: _self.cusPreId,
		      			processStatus:"3",
		      			remark:_self.reason
					}
				this.toAppeal(body)
			},
			acceptComplaint(rows,num) {
				var body = {};
				body.params = {
		      			id: rows.id,
		      			processStatus:"2"
					}
				this.checkedNumber	= num;
				
				MessageBox.confirm('确认接受？').then(action => {
				 	this.toAppeal(body)
				});
			},
			toAppeal(params) {
				let _self = this;
				var url = _self.utilHelper.apiUrl + "/api/auditCPAppeal";
		   	 	_self.$http.post(url, params).then((response) => {
					var data = response.body.resData;
		   			var result = data.result;
		   			var errorMsg = data.resultMsg;
    		    	if(result=="1"){
						var instance = Toast('提交成功!');
						setTimeout(() => {
					  		instance.close();
						  	_self.appealList[_self.checkedNumber].isShow = false;
						  	_self.toShow = false;
						  	// _self.initAppealList();
						  	_self.$router.push({path: '/complaintHandling'});
						}, 300);	

    		    	}else{
						Toast({
						  message: errorMsg,
						  position: 'middle',
						  duration: 3000
						});
    		    	}
		  		}, (response) => {
		  			Toast({
					  message: '登陆超时',
					  position: 'middle',
					  duration: 3000
					});
			  	});
			}
		}
	}
</script>
<style scoped>
	.prompt{padding: 10px;font-size: 12px;color: #666;line-height: 16px;}
	.complaint-info-list>li{margin-top: 20px;}
	.complaint-info-list>li:first-child{margin-top: 0;}
	.complaint-info{border-top: 1px solid #cdcdcd;}
	.complaint-info li{padding: 8px 10px;position: relative;line-height: 22px;width: 100%;background-color: #fff;border-bottom: 1px solid #cdcdcd;}
	.complaint-info .faIcon{color: #333;margin-right: 4px;}
	.complaint-info .name{color: #333;margin-right: 6px;}
	.complaint-info .sex{width: 16px;height: 14px;overflow: hidden;background: url(../assets/images/sex.png) no-repeat;background-size: 32px auto;display: inline-block;position: relative;top: 2px;margin-right: 2px;background-position: 0 0;}
	.complaint-info .sex.active{background-position: -16px 0; }
	.complaint-info .label{height: 14px;background-color: #ee9e49;color: #fff;font-size: 12px;padding: 0 6px;display: inline-block;line-height: 14px;margin-right: 2px;}

	.complaint-info .right-list{padding-right: 110px;}
	.numberInfo{position: absolute;right: 10px;top: 8px;width: 110px;line-height: 20px;}
	.numberInfo .fa{font-size: 20px;display: inline-block;position: relative;top: 1px;}

	.source{color: #333;line-height: 16px;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top: 4px;font-size: 12px;}
	.source .fa-location-arrow{margin-right: 10px;font-size: 18px;}
	.complaint-time{font-size: 12px;}
	.complaint-time .fa{margin-right: 6px;color: #666;font-size: 16px;position: relative;top: 1px;}

	.btnA{width: 72px;height: 28px;line-height: 26px;border:1px solid #eb6100;text-align: center;float: right;display: inline-block;border-radius: 4px;margin-left: 10px;color: #fff;background-color: #eb6100;}
	.btnNo{background-color: #fff;color: #eb6100;}

	/*显示加载*/
	.page-infinite-loading {text-align: center;height: 50px;line-height: 50px;}
	.page-infinite-loading .circleIcon {display: inline-block;vertical-align: middle;margin-right: 5px;}
	/*弹出层*/
	.popup-page,.popup-mask{position: fixed;z-index: 99;left: 0;right: 0;top: 0;bottom: 0;}
	.popup-mask{background-color: #000;opacity: 0.3;}
	.popup-container{width: 260px;position: relative;background-color: #fff;top: 160px;left: 50%;margin-left: -130px;z-index: 100;border-radius: 6px;}
	.popup-header{padding: 12px 20px;border-bottom: 1px solid #cdcdcd;}
	.popup-body{padding: 16px 20px 10px;}
	.invalid-list li{position: relative;padding-left: 24px;line-height: 20px;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 10px;}
	.checkIcon{position: absolute;left: 0;width: 18px;height: 18px;background:url(../assets/images/checked.png) no-repeat;background-position: 0 0;background-size: 36px auto;top: 1px;}
	.invalid-list li:last-child{margin-bottom: 0;}
	.invalid-list .active .checkIcon{background-position: -18px 0;}
	.invalid-list .reason{border: 1px solid #cdcdcd;width: 100%;margin-top: 4px;display: none;padding: 4px 10px;}
	.invalid-list .active .reason{display: block;}
	.popup-footer{width: 100%;border-top: 1px solid #cdcdcd;}
	.popup-footer .btn{width: 50%;text-align: center;float: left;padding: 12px 0;font-size: 16px;color: #999;}
	.popup-footer .checkBtn{color: #eb6100;}
	.popup-footer .btn:first-child{border-right: 1px solid #cdcdcd;}
	.popup-footer:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}
</style>